<script setup>
import { ref, computed,watch } from "vue";
import { RouterView, useRoute } from "vue-router";
import { Tabbar, TabbarItem } from "vant";
import "vant/es/tabbar/style";
import "vant/es/tabbar-item/style";

const activeTab = ref(0);
const route = useRoute();

// 计算属性，用于判断是否显示底部导航栏
const showTabbar = computed(() => {
  return ![
    "/login",
    "/register",
    "/message",
    "/settings",
    "/language",
    "/fundPassword",
    "/verification",
    "/kyc",
    "/paymentInfo",
    "/addpayment",
    "/assetsInr",
    "/withdraw",
    "/withdrawRecord",
    "/withdrawInr",
    "/market"
  ].includes(route.path);
});

// 添加路由监听
watch(() => route.path, (newPath) => {
  const routeIndexMap = {
    '/home': 0,
    '/order': 1,
    '/market': 2,
    '/assets':3,
    '/user': 4
  };
  activeTab.value = routeIndexMap[newPath] ?? activeTab.value;
}, { immediate: true });
</script>

<template>
  <div class="app-container">
    <!-- 路由视图 -->
    <RouterView />

    <!-- 底部导航，根据 showTabbar 决定是否显示 -->
    <Tabbar v-if="showTabbar" v-model="activeTab" class="footer-tabbar">
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/order" icon="orders-o">订单</van-tabbar-item>
      <van-tabbar-item to="/market" icon="after-sale">市场</van-tabbar-item>
      <van-tabbar-item to="/assets" icon="paid">资产</van-tabbar-item>
      <van-tabbar-item to="/user" icon="user-o">我的</van-tabbar-item>
    </Tabbar>
  </div>
</template>

<style>
.footer-tabbar {
  flex-shrink: 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
</style>
